<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body @close="handleClose" width="80%">
    <div class="full-height full-width" v-loading="loading" element-loading-text="文件加载中">
      <vue-office-docx
        v-if="fileType === 'docx' || fileType === 'doc'"
        :src="filePath"
        style="height: 100%"
        @rendered="rendered"
        @error="HandlError"
      ></vue-office-docx>
      <vue-office-pdf v-else-if="fileType === 'pdf'" :src="filePath" style="height: 100%" @rendered="rendered" @error="HandlError"></vue-office-pdf>
      <vue-office-excel
        v-else-if="fileType === 'xlsx' || fileType === 'xls'"
        :src="filePath"
        style="height: 100%"
        @rendered="rendered"
        @error="HandlError"
      ></vue-office-excel>
      <el-image
        v-else-if="fileType === 'jpg' || fileType === 'png' || fileType === 'jpeg'"
        :src="filePath"
        @load="loading = false"
        @error="loading = false"
      ></el-image>
      <div
        v-else-if="fileType === 'mp3' || fileType === 'm4a' || fileType === 'ogg'"
        style="height: 100%; display: flex; align-items: center; justify-content: center"
      >
        <audio @loadeddata="loading = false" @canplay="loading = false" controls :src="filePath">
          <!-- <source :src="filePath" :type="'audio/' + fileType" /> -->
          当前浏览器暂不支持播放该格式音频
        </audio>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import VueOfficeDocx from '@vue-office/docx'
// import VueOfficeExcel from '@vue-office/excel'
// import VueOfficePdf from '@vue-office/pdf'

const VueOfficeDocx = () => import('@vue-office/docx')
const VueOfficeExcel = () => import('@vue-office/excel')
const VueOfficePdf = () => import('@vue-office/pdf')

// import '@vue-office/docx/lib/index.css'
export default {
  name: 'file-preview',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    file: {
      type: Object,
      default: () => {
        return { name: '', type: '', url: '' }
      }
    }
  },
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePdf
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      loading: true,
      title: '文件预览',
      fileType: '',
      filePath: '',
      dialogVisible: false
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val
        if (val) {
          this.loading = true
          let { url, name, type } = this.file
          this.title = name.split('.').shift() || '文件预览'
          this.fileType = type
          this.filePath = this.baseUrl + url
        }
      }
    }
  },
  methods: {
    /* 文件组件渲染完毕 */
    rendered() {
      this.loading = false
    },
    /* 文件预览组件渲染出错 */
    HandlError(errorInfo) {
      this.$modal.msgError('该文件暂不支持在线预览')
      this.loading = false
      this.handleClose()
    },

    // 模态框关闭
    handleClose() {
      this.reset()
      this.$emit('update:visible', false)
    },
    reset() {
      this.fileType = ''
      this.filePath = ''
      this.title = ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 75vh;
}
</style>
